<template>
  <div class="detail">
    <!--提示步骤1：二维码提示-->
    <div class="ewmMake" v-show="showEwmHint && !showMake" @touchmove.prevent="" @click="ewmNext">
      <div class="ewmHint">
        <img src="~common/image/ewmHint.png" alt="">
        <div class="ewm">
          <img :src="ewm+'?t=' + new Date().getTime()">
        </div>
      </div>
      <div class="nextStep" @click="ewmNext">
        <img src="~common/image/nextStep.png" alt="">
      </div>
    </div>
    <!--提示步骤2：生成图片提示-->
    <div class="generateMake" v-show="generateHint" @touchmove.prevent="" @click="generateDifferentiate">
      <div class="generateHint">
        <img src="~common/image/generateHint.png" alt="">
      </div>
      <div class="nextStep" @click="generateNext" v-show="shwoShareBtn">
        <img src="~common/image/nextStep.png" alt="">
      </div>
      <div class="generateIsee" @click="isee" v-show="!shwoShareBtn">
        <img src="~common/image/isee.png" alt="">
      </div>
    </div>
    <!--提示步骤3：分享提示-->
    <div class="shareMake" @touchmove.prevent="" v-show="shareHint && shwoShareBtn" @click="isee">
      <div class="shareHint">
        <img src="~common/image/shareHint.png" alt="">
      </div>
      <div class="isee" @click="isee">
        <img src="~common/image/isee.png" alt="">
      </div>
    </div>
    <!--分享提示-->
    <div class="showShare" @touchmove.prevent="" v-show="showShare" @click="showShare = false">
      <img src="~common/image/shareHint.png" alt="">
    </div>
    <div class="content" v-show="init">
      <div class="title border-bottom" v-if="showEdit">
        <router-link tag="i" to="/greeting" class="icon-xiangzuo"></router-link>
        <router-link tag="span" to="/greeting" class="title-return">我的贺卡</router-link>
        {{bTitle}}
        <span @click="showShareHint" v-show="shwoShareBtn">分享</span>
      </div>
      <div style="height:1.5rem;" v-if="showEdit"></div>
      <div class="box" ref="greeting">
        <div class="door" v-show="callTemplate">
          <img :src="callTemplate">
        </div>
        <div class="pic" v-show="callImg" ref="pic">
          <img :src="callImg" alt="">
        </div>
        <div class="blessing" ref="blessing">
          来自<span class="blessingSpan">{{ImgList.name}}</span>的祝福：
        </div>
        <div class="info" ref="info">
          <div class="wishText">
            <p ref="wishText">{{textContent}}</p>
            <div class="wishImg" v-if="callText !==''">
              <img :src="callText" alt="">
            </div>
          </div>
          <div class="ewm" ref="ewm">
            <img @click="jumpMake" :src="ewm+'?t=' + new Date().getTime()">
            <p v-show="showMake">长按识别二维码</p>
            <p v-show="showMake">制作贺卡</p>
          </div>
        </div>
        <div class="myMake" ref="myMake" @click="jumpMake" v-if="showMake">
          我也要制作
        </div>
      </div>
      <div class="showEWM" v-show="showGenerate" @touchmove.prevent="">
        <div class="card-box">
          <div class="ewm-pic">
            <img v-show="saveGenerate !==''" :src="saveGenerate" alt="">
            <img v-show="saveGenerate ===''" src="~common/image/loading.gif" alt="">
            <span @click="showGenerate = false,show = true"><img src="~common/image/close.png" alt=""></span>
          </div>
          <div class="card-btn" v-show="saveGenerate !==''">
            长按图片发送
          </div>
        </div>
      </div>

      <div class="showEWM" v-show="attentionWeChat" @touchmove.prevent="">
        <div class="card-box">
          <div class="ewm-pic">
            <img src="~common/image/WechatIMG744.jpeg" alt="">
            <span @click="attentionWeChat = false">
              <img src="~common/image/close.png" alt="">
            </span>
          </div>
          <div class="card-btn" style="line-height:.6rem">
            长按识别关注公众号
            <p>（内含制作贺卡入口）</p>
          </div>
        </div>
      </div>
      <div class="setting" v-show="!showMake && show">
        <p class="border-bottom" @click="_generate"><i class="icon-nianqiaxiaoshou"></i><span>生成贺卡图</span></p>
        <p class="border-bottom" @click="amend"><i class="icon-xiugai"></i><span>修改贺卡</span></p>
        <p @click="deleteCard"><i class="icon-del"></i><span>删除贺卡</span></p>
        <p class="border-top" @click="attentionWeChat = true" v-show="shwoShareBtn">
          <i class="icon-wxgzh"></i><span>关注公众号</span>
        </p>
      </div>
    </div>
    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>

</template>

<script>
  import {shareCardInit, CreateBlessCardPictrue, DeleteCardTitle, CancelTheGuide} from 'common/js/greeting'
  import {weChatShare, statisticsShare} from 'common/js/weChat'
  import {mapGetters} from 'vuex'
  import Loading from 'components/loading/Loading'
  import {setTitle} from 'common/js/title'
  import {computePV} from 'common/js/statistics'

  export default {
    data() {
      return {
        init: false,
        bTitle: '',
        callTemplate: '',//模板
        callImg: '',//中间图片
        callText: '',//文字图片
        textContent: '',//文字内容
        ewm: '',//二维码
        ImgList: [],//列表
        showEdit: false,
        showMake: false,
        show: true,
        showGenerate: false,
        saveGenerate: '',
        openId: '',
        showShare: false,
        callBackURL: '',
        initHint: false,
        shwoShareBtn: false,//分享按钮
        showEwmHint: false,//二维码提示遮罩
        generateHint: false,//生成图片提示遮罩
        shareHint: false, //分享提示遮罩
        attentionWeChat: false,
      }
    },
    computed: {
      ...mapGetters([
        'loading'
      ]),
    },
    mounted() {
      computePV({
        page_type: 3
      })
      //判断是否微信内核
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.shwoShareBtn = true;
        if (window.location.href.indexOf("goWeChat") === -1) {
          window.location.href = "https://www.6vbuy.com/member/index.php?act=wx_login&op=getSilenceInfo2&com=6vbuy&go=2&id=" + this.$route.params.token + '&c_id=' + this.$route.params.id;
        } else {
          if (window.location.href.indexOf("o_id") > 0) {
            this.openId = this.getUrl('o_id');
            this.callBackURL = location.href.split('#')[0]
          }
          this.is_init();
        }
      } else {
        this.is_init();
      }
    },
    methods: {
      //全屏点击，区分是否微信的
      generateDifferentiate(){
        if(this.shwoShareBtn){
          this.generateNext();
        }else{
          this.isee();
        }
      },
      //我知道了
      isee() {
        CancelTheGuide({
          "id": this.$route.params.id,//贺卡id
        }).then(res => {
          this.showEwmHint = false;
          this.generateHint = false;
          this.shareHint = false;
        })
      },
      //生成图片下一步
      generateNext() {
        this.generateHint = false;
        this.shareHint = true;
      },
      //二维码下一步
      ewmNext() {
        //隐藏二维码提示
        this.showEwmHint = false;
        //显示生成图片提示
        this.generateHint = true;
      },
      //显示分享提示
      showShareHint() {
        this.showShare = true;
      },
      is_init() {
        //初始化
        this.$store.dispatch('showLoading');
        shareCardInit({
          "phpsid": localStorage.getItem('token'),//session_id
          "card_id": this.$route.params.token,//名片id
          "id": this.$route.params.id,//贺卡id
        }).then(res => {
          this.$store.dispatch('hideLoading');
          if (res.status === 1) {
            if (res.expand.state === 0) {
              this.initHint = true;
              this.showEwmHint = true;
            }
            this.init = true;
            this.ImgList = res.data;
            this.bTitle = this.ImgList.btitle
            setTitle('来自' + this.ImgList.name + '的祝福')
            this.callTemplate = res.data.Ctemplimg.path;
            this.ewm = res.data.Qcode_path;
            this.callText = res.data.Wtemplimg.path
            this.textContent = res.data.content
            this.callImg = res.data.img.path
            this.$refs.greeting.style.backgroundImage = 'url(' + res.data.backgimg.path + ')';
            this.$refs.wishText.style.color = res.data.word_color
            this.$refs.blessing.style.color = res.data.word_color
            this._weChatShare();
            if (res.expand.is_oneself === 1) {
              this.showEdit = true;
            } else {
              this.showMake = true;
              this.$refs.pic.style.top = '2.86rem'
              this.$refs.info.style.top = '13.5rem'
              this.$refs.blessing.style.top = '13.4rem'
            }
          } else if (res.status < 0) {
            this.$dialog.toast({
              mes: res.expand.info,
              timeout: 1000,
              icon: 'error',
              callback: () => {
                this.$router.push('/greeting')
              }
            });

          } else {
            this.$dialog.alert({mes: res.msg});
          }
        }).catch(res => {
          this.$dialog.alert({mes: '网络错误~'});
        })
      },
      jumpMake() {
        window.location.href = this.ImgList.make_path
      },
      //上传贺卡
      deleteCard() {
        this.$dialog.confirm({
          title: '确定删除贺卡？',
          mes: '',
          opts: () => {
            DeleteCardTitle({
              id: this.$route.params.id,//贺卡id
              phpsid: localStorage.getItem('token') //session_id
            }).then(res => {
              if (res.status === 1) {
                this.$router.push('/greeting')
              }
            })
          }
        });
      },
      //生成贺卡图片
      _generate() {
        this.showGenerate = true;
        this.show = false;
        CreateBlessCardPictrue({
          back_path: this.ImgList.backgimg.path,
          card_temp_path: this.ImgList.Ctemplimg.path,
          img_path: this.ImgList.img.path,
          qcode_path: this.ewm,
          word_path: this.ImgList.Wtemplimg.path,
          content: this.ImgList.content,
          name: this.ImgList.name,
          phpsid: localStorage.getItem('token'),
          bid: this.$route.params.id,
          cid: this.$route.params.token,
          word_color: this.ImgList.word_color
        }).then(res => {
          if (res.status === 1) {
            this.saveGenerate = res.data + '?t=' + new Date().getTime();
          } else {
            this.$dialog.alert({mes: '生成贺卡不成功！'});
          }
        }).catch(res => {
          this.$dialog.alert({
            mes: '生成贺卡失败！', callback: () => {
              this.showGenerate = false;
              this.show = true;
            }
          });
        })
      },
      //修改
      amend() {
        this.$router.push('/greetingEdit/' + this.$route.params.id);
      },
      //编辑
      _edit() {
        this.show = true;
        //this.$router.push('/greetingEdit/' + this.$route.params.id)
      },
      getUrl(para) {
        var paraArr = location.search.substring(1).split('&');
        for (var i = 0; i < paraArr.length; i++) {
          if (para == paraArr[i].split('=')[0]) {
            return paraArr[i].split('=')[1];
          }
        }
        return '';
      },
      //微信分享统计
      _weChatShare() {
        weChatShare({
          url: this.callBackURL
        }).then(res => {
          if (res.status === 1) {
            wx.config({
              debug: false,
              appId: res.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature,// 必填，签名
              jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表
            });
            wx.error(function (res) {
              console.log(res)
            });
            wx.ready(() => {
              //分享到朋友圈
              wx.onMenuShareTimeline({
                title: '来自' + this.ImgList.name + '的祝福', // 分享标题
                link: baseWeChatURL + 'greetingDetail/' + this.$route.params.id + '/' + this.$route.params.token,
                imgUrl: this.ImgList.img.path, // 分享图标
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 1,
                    "channel": 0
                  });
                },
              });
              //分享给朋友
              wx.onMenuShareAppMessage({
                title: '来自' + this.ImgList.name + '的祝福', // 分享标题
                desc: this.ImgList.name + '给您发贺卡啦', // 分享描述
                link: baseWeChatURL + 'greetingDetail/' + this.$route.params.id + '/' + this.$route.params.token,
                imgUrl: this.ImgList.img.path, // 分享图标
                type: this.ImgList.title, // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 1,
                    "channel": 1
                  })
                },
              });
              //分享到QQ
              wx.onMenuShareQQ({
                title: '来自' + this.ImgList.name + '的祝福', // 分享标题
                desc: this.ImgList.name + '给您发贺卡啦', // 分享描述
                link: baseWeChatURL + 'greetingDetail/' + this.$route.params.id + '/' + this.$route.params.token,
                imgUrl: this.ImgList.img.path, // 分享图标
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 1,
                    "channel": 3
                  });
                },
              });
              //分享到QQ空间
              wx.onMenuShareQZone({
                title: '来自' + this.ImgList.name + '的祝福', // 分享标题
                desc: this.ImgList.name + '给您发贺卡啦', // 分享描述
                link: baseWeChatURL + 'greetingDetail/' + this.$route.params.id + '/' + this.$route.params.token,
                imgUrl: this.ImgList.img.path, // 分享图标
                success: () => {
                  statisticsShare({
                    "openid": this.openId,
                    "page_type": 1,
                    "channel": 2
                  });
                },
              });
            });
          }
        })
      }
    },
    components: {
      Loading
    }
  }
</script>


<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .detail
    height: 100%;

  .ewmMake, .generateMake, .shareMake
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-show;
    z-index: 130;
    color: $color;
    .ewmHint
      position: absolute;
      bottom: 2rem;
      right: .8rem;
      img
        width: 3.59rem;
    .ewm
      margin-top: .55rem
      padding-left: 2rem;
      color: $color;
      img
        display: inline-block;
        width: 2.45rem;
        height: 2.45rem;
        margin-bottom: .1rem;

  .ewmMake
    .nextStep
      position: absolute;
      bottom: 4rem;
      left: 3rem;
      width: 3.32rem;
      img
        width: 100%;
        height: 100%;

  .generateMake
    .generateHint
      position: absolute;
      top: 2rem;
      right: 0;
      img
        width: 8rem;
      .generateNext
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        width: 3.32rem;
    .nextStep
      position: absolute;
      top: 6.6rem;
      left: 3.4rem;
      width: 3.32rem;
      img
        width: 100%;
        height: 100%;
    .generateIsee
      position: absolute;
      left: 3.4rem;
      top: 6.6rem;
      width: 3.32rem;
      img
        width: 100%;

  .shareHint
    position: absolute;
    top: 0;
    right: 1rem;
    width: 4.25rem;
    img
      width: 100%;

  .isee
    position: absolute;
    right: 1.5rem;
    top: 4.5rem;
    width: 3.32rem;
    img
      width: 100%;

  .showShare
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: $background-show;
    img
      position: absolute;
      top: 0;
      right: 1rem;
      width: 4.25rem;

  .title
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5rem;
    line-height: 1.5rem
    text-align: center;
    font-size: .55rem;
    color: $color-title;
    background: $background;
    z-index: 99;
    padding: 0 2rem 0 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    i
      position: absolute;
      top: 0;
      left: .5rem;
      line-height: 1.5rem;
      font-size: .6rem;
      color: $color-l-z;
    span
      position: absolute;
      top: 0;
      right: .5rem;
      line-height: 1.5rem;
      display: inline-block;
      font-size: .44rem;
    .title-return
      position: absolute;
      top: 0;
      left: 1rem;
      width: 2rem;
      line-height: 1.5rem;

  .setting
    position: fixed;
    top: 2rem;
    right: 0;
    line-height: 1.13rem;
    z-index: 100;
    background: -webkit-linear-gradient(-300deg, rgba(245, 76, 197, .9), rgba(135, 85, 240, .9));
    border-top-left-radius: .2rem;
    border-bottom-left-radius: .2rem;
    padding: 0 .2rem;
    p
      position: relative;
      color: $color;
      font-size: .3rem;
      height: 1.13rem;
      border-radius: .5rem;
      padding-left: .5rem;
    span
      display: inline-block;
      margin-left: .2rem;
    i
      position: absolute;
      top: 0;
      left: 0;
      line-height: 1.13rem;
      font-size: .5rem;

  .content
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    .box
      background-repeat: no-repeat;
      background-size: 100% 100%;
      min-height: 100%;
      height: 18.1rem;
    .door
      position: relative;
      z-index: 9;
      min-height: 100%;
      img
        display: block;
        width: 100%;
        height: 100%;
    .pic
      position: absolute;
      top: 4.36rem;
      left: 2.02rem;
      right: 2.02rem;
      height: 9.7rem;
      overflow: hidden;
      z-index: 3;
      img
        display: block;
        width: 100%;
        height: 9.7rem;
    .info
      position: absolute;
      top: 15rem;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .5rem .5rem 0 .5rem;
      z-index: 99;
      .ewm
        position: relative;
        padding: .3rem;
        text-align: center;
        color: $color;
        font-size .35rem;
        line-height: .4rem;
        text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
        img
          display: inline-block;
          width: 2.45rem;
          height: 2.45rem;
          margin-bottom: .1rem;
        .ewmHint
          position: absolute;
          top: -2.1rem;
          right: .3rem;
          z-index: 120;
          width: 2.45rem;
          height: 2.45rem;
          background: -webkit-linear-gradient(-300deg, rgba(245, 76, 197, .9), rgba(135, 85, 240, .9));
          padding: .5rem .2rem;

      .blessing
        width: 6.18rem;
        height: 2.78rem;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        font-size: .4rem;
        color: $color;
        img
          width: 100%;
          height: 100%;
        .b-text
          width: 3.06rem;
          text-align: center;
          line-height: 2.78rem;
          border: 1px dashed rgba(255, 255, 255, .3);
        .b-pic
          width: 3.06rem;
          line-height: 2.78rem;
          text-align: center;
          background: $background-b-text;
          border: 1px solid rgba(255, 255, 255, .1);

      .wishText
        position: relative;
        width: 6.18rem;
        height: 2.78rem;
        color: #000;
        line-height: .7rem;
        font-size: .4rem;
        span
          display: flex;
          justify-content: center;
          align-items: center;
          background: $background-close;
          position: absolute;
          top: -.1rem;
          right: -.1rem;
          color: $color;
          width: .5rem;
          height: .5rem;
          border-radius: .5rem;
        .wishImg
          width: 6.18rem;
          height: 2.78rem;
          text-align: center;
          img
            width: 100%;
            height: 100%;
    .myMake
      position: fixed;
      top: .5rem;
      right: .5rem;
      width: 2.2rem;
      line-height: .77rem;
      text-align: center;
      z-index: 99;
      color: $color;
      font-size: .3rem;
      border-radius: .5rem;
      background: -webkit-linear-gradient(-300deg, rgba(245, 76, 197, .9), rgba(135, 85, 240, .9));
    .blessing
      position: absolute;
      top: 14.9rem;
      left: .5rem;
      right: 0;
      font-size: .4rem;
      z-index: 99;
      .blessingSpan
        position: relative;
        border-bottom: 1px solid #000 !important;
        font-size: .6rem;
        padding: 0 .1rem;
        display: inline-block;
        text-align: center;
        min-width: 1rem;
      p
        position: relative;
        width: 100%;
        height: .6rem;
        line-height: .6rem;

  .sidebar
    position fixed;
    top: 3.2rem;
    left: 0;
    background: -webkit-linear-gradient(-315deg, rgba(245, 76, 197, .9), rgba(135, 85, 240, .9));
    z-index: 99;
    width: 1.4rem;
    text-align: center;
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
    .item
      color: $color;
      height: 1.8rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      font-size: .3rem;
      i
        display: block;
        width: 100%;
        font-size: .58rem;
        margin-bottom: .1rem;

  .setting-title
    position: relative;
    padding: 0 .5rem;
    font-size: .37rem;
    .setting-text
      line-height: 1.32rem;
      color: $color-b-title;
      .active
        background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    .setting-btn
      position: absolute;
      top: .4rem;
      right: .5rem;
      display: block;
      width: 1.24rem;
      height: .58rem;
      line-height: .7rem;
      color: $color;
      border-radius: .29rem;
      text-align: center;
      background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);

  .input
    margin: .45rem;
    font-size: .4rem
    input
      width: 100%;
      line-height: 1rem;
      text-indent: .2rem;
      margin-bottom: .3rem;
    textarea
      width: 100%;

  .wordBox
    span
      padding: 0 .24rem;
    .word
      position: relative;
      border-right: 1px solid #e6e6e6 !important;
    .word:after
      content: ''
      position: absolute;
      top: 0;
      right: .24rem;
      bottom: 0;

  .showEWM
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $background-show;
    z-index: 999;
    .ewm-box
      position: absolute;
      top: 50%;
      left: 1.25rem;
      right: 1.25rem;
      transform: translateY(-50%);
    .card-box
      position: absolute;
      top: 50%;
      left: 2rem;
      right: 2rem;
      transform: translateY(-50%);
      img
        border-radius: .1rem;
        width: 100%;
        height: 100%;
      .ewm-pic
        position: relative;
        span
          position: absolute
          top: -.5rem;
          right: -.5rem;
          height: 1rem;
          width: 1rem;
          img
            width: 1rem;
            height: 1rem;
    .ewm-btn
      margin-top: .3rem;
      line-height: 1.12rem;
      border-radius: .56rem;
      color: $color;
      text-align: center;
      font-size: .42rem;
    .card-btn
      margin: 0 .6rem;
      margin-top: .3rem;
      line-height: 1.12rem;
      border-radius: .56rem;
      color: $color;
      text-align: center;
      font-size: .42rem;


</style>
